<template>
  <div id="shareTn" style="background: #fff;" :style="{minHeight: $store.state.bodyHeiht}">

    <img src="../../static/img/shareBanner.png" style="width: 100%; height: auto; display: block;">
    <div class="qrcode">
      <img v-if="wechatShareConfig.link" :src="'https://tool.kd128.com/qrcode?text=' + wechatShareConfig.link + '&logo=https%3A%2F%2Fwap.tuniaoapp.com%2Fstatic%2Fimg%2Fapplogo.png'" style="width: 2.5rem; height: 2.5rem; display: block; margin: 0rem auto;">
    </div>
    <div class="share-info">
      <p class="title">活动说明</p>
      <p>您可以邀请您的小伙伴扫描上面的二维码</p>
      <p>也可以通过以下方式分享，丰厚佣金等你拿</p>
    </div>
    <p style="text-align: right; padding-right: 0.6rem;">查看奖励规则 ></p>
    <p style="margin: 0.3rem 0.5rem; text-align: center; font-size: 0.32rem;">分享方式</p>
    <ul class="flex shareIcon" style="margin-top: 0.2rem;">
      <li>
        <i class="icon icon-wechat" style="background: #3baf38;"></i>
        <p>微信好友</p>
      </li>
      <li>
        <i class="icon icon-pengyouquan" style="background: #3baf38;"></i>
        <p>微信朋友圈</p>
      </li>
      <li>
        <i class="icon icon-QQ" style="background: #4daee8;"></i>
        <p>QQ好友</p>
      </li>
      <li>
        <i class="icon icon-QQkongjian" style="background: #ec983e;"></i>
        <p>QQ空间</p>
      </li>
    </ul>
  </div>
</template>
<script>
  import PubHeader from '../components/PubHeader.vue'
  import { isWechat, getWechatConfig } from '../libs/fn'
  export default{
    name: 'shareTn',
    components: {
      PubHeader
    },
    created() {
      if(isWechat()) {
        const { path } = this.$route
        getWechatConfig(path, this.$store.state.userInfo.uid, this.$store.state.userInfo.token)
      }
      this.$wechat.ready(() => {
        this.$wechat.onMenuShareAppMessage(this.wechatShareConfig)
        this.$wechat.onMenuShareTimeline(this.wechatShareConfig)
        this.$wechat.onMenuShareWeibo(this.wechatShareConfig)
        this.$wechat.onMenuShareQZone(this.wechatShareConfig)
      })


      this.$http.post($config.host + '/api/userinfo/shareurl', qs.stringify({
        uid: this.$store.state.userInfo.uid,
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token
      })).then(res => {
        const {code, msg, data} = res.data
        if(code == 1) {
          this.wechatShareConfig.link = encodeURIComponent(data)
        }
      })

    },
    data() {
      return {
        host: $config.host,
        wechatShareConfig: {
          title: '随机分刮2亿现金，单单有佣金',
          desc: '亲，好友邀您注册途鸟，分享就有大礼，你发展的货主发货，单单有佣金。城际整车，零担专线，同城配送，寄快递。送货，有途鸟，就够了！',
          link: '',
          imgUrl: $config.wechatHost + '/static/img/applogo.png'
        }
      }
    }

  }
</script>
<style scoped>
  .qrcode{
    margin-top: -1.25rem;
  }
  .share-info{
    margin: 0.3rem 0.5rem;
    background: #FEFCD6;
    padding: 0.2rem 0.5rem;
    text-align: center;
  }
  .share-info .title{
    color: #EE3F3F;
    font-size: 0.34rem;
    margin-bottom: 0.2rem;
    line-height: 0.5rem;
    font-weight: 500;
  }
  .shareIcon li{
    flex: 1;
    text-align: center;
  }
  .shareIcon .icon{
    font-size: 0.5rem;
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    line-height: 0.7rem;
    border-radius: 50%;
    color: #fff;
  }
  .shareIcon p{
    line-height: 0.8rem;
    font-size: 0.26rem;
  }
</style>
